<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <link th:href="@{/css/semantic.min.css}" rel="stylesheet">
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{css/main.css}" rel="stylesheet"/>
</head>

<body>
<div class="ui container" style="padding-top:10%">
    <div class="ui grid center aligned">
        <div class="row">
            <div class="sixteen wide tablet six wide computer column">
                <div class="ui left aligned segment">

                    <form id="form1" class="ui form" th:action="@{/admin/login}" method="post">

                        <h1 class="ui header center aligned">
                            <span class="m-text">后台管理</span>
                        </h1>

                        <div class="field">
                            <label>
                                用户名:
                            </label>
                            <div class="ui fluid icon input">
                                <input name="username" id="u_name" type="email" autocomplete="off"
                                       style="width:100%!important;min-width:100%;width:100%;">
                                <i class="icon user outline"></i>
                            </div>
                        </div>
                        <div class="field">
                            <label>
                                密码:
                            </label>
                            <div class="ui fluid icon input">
                                <input name="password" id="u_pass" type="password" autocomplete="off"
                                       style="width:100%!important;min-width:100%;width:100%;">
                                <i class="icon key"></i>
                            </div>
                        </div>
                        <div class="field">

                            <a class="ui teal right labeled icon button fluid submit">
                                Login
                                <i class="icon sign in"></i>
                            </a>

                        </div>

                        <div class="field">
                            <div class="ui error mini message"></div>
                            <div class="ui mini negative message" th:unless="${#strings.isEmpty(msg)}" th:text="${msg}">
                                用户名和密码错误
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<br>
<br>
<br>


</body>

<!-- 页面jQuery.js的引用位置问题,如果导入了其它与jquery有关的js文件,那么jquery.js须在其它js的前面 -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/semantic.min.js}"></script>
<script th:src="@{/js/login.js}"></script>
<script>


    $('.ui.form').form({
        fields: {
            username: {
                identifier: 'username',
                rules: [{
                    type: 'empty',
                    prompt: '请输入用户名'
                }]
            },
            password: {
                identifier: 'password',
                rules: [{
                    type: 'empty',
                    prompt: '请输入密码'
                }]
            }
        }
    });

    var colors = ["#F25F5C", "#247BA0", "#8e44ad", "#ED6A5A", "#32936F", "#2c3e50", "#E83F6F", "#32936F", "#2E294E"];
    var rand = Math.floor(Math.random() * colors.length);
    $('body').css("background-color", colors[rand]);

</script>

</body>
</html>